<template>
  <!-- {{  props.barcodeList }} -->
  <div class="content">
    <div class="table-default">
      <el-button type="primary" @click="goBack">返回</el-button>
      <el-button type="warning" @click="handlerPDF">确认导出</el-button>
    </div>
    <div class="print-show">
      <div ref="print" id="barcode" style="width: 100%; height: 100%">
        <div v-for="(item, index) in barcodeList" :key="index" style="width: 100%; height: 100%; padding-top: 20px; display: flex; justify-content: center; align-items: center">
          <div class="tableBox" style="display: flex; justify-content: center; align-items: center; page-break-after: always">
            <table style="border-collapse: collapse">
              <tr>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" rowspan="2"><img :src="item.Twocode" /></td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">条码</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">{{ item.barcode }}</td>
              </tr>
              <tr>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">供应商单号:</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">{{ item.supplierOrder }}</td>
              </tr>
              <tr>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">采购订单：</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">{{ item.fmaterialid }}</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">数量:80</td>
              </tr>
              <tr>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">存货编码：</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4">{{ item.fmaterialid }}</td>
              </tr>
              <tr>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">存货全名：</td>
                <td style="border: solid 1px #000; text-align: center;  padding: 5px 3px" colspan="4">{{ item.fmaterialname }}</td>
              </tr>
              <tr>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">本箱数量：</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">{{ item.fqty }}</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">个</td>
                <td style="border: solid 1px #000; text-align: center; w padding: 5px 3px; width: 20px" rowspan="2">物料条码</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" rowspan="2"><img :src="item.TwocodefMaterialid" /></td>
              </tr>
              <tr>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">发货日期：</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2"></td>
              </tr>
              <tr>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">生产日期：</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px"></td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">有效日期：</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2"></td>
              </tr>
              <tr>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">备注：</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4"></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

 
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
// import { getLodop } from '/admin/utils/LodopFuncs'
import printJS from 'print-js'
import { PDFDocument, rgb } from 'pdf-lib'
import Vue from 'vue'
import VueToPdf from 'vue-to-pdf'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
import storage from '/admin/utils/storage'


import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const print = ref()

let barcodeList = ref(JSON.parse(route.query.barcodeList))

let emit = defineEmits(['send-data'])

let handlerPDF = () => {
  triggerEvent()
}

let triggerEvent = () => {
  printJS({
    printable: 'barcode', // 要打印的元素的ID或HTML字符串
    type: 'html', // 打印内容的类型，可以是'html'、'image'、'pdf'等
    targetStyle: ['*'],
    scanStyles: false,
    css: `
    @page {
      size: 100 100;
    }
  `,
  })
}

let goBack = () => {
  let routeList = storage.getItem('routeList')

  routeList = routeList.filter(item => item.title != '送货单导出')
  storage.setItem('routeList', routeList)

  // router.push('/purchasing/supplier')
  router.go(-1)
}
</script>

<style lang="css" scoped>
.content {
  width: 100%;
  height: 100%;
  /* background-color: antiquewhite; */
}
.table-default {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.print-show {
  background-color: #fff;
  /* border: 1px solid #ccc; */
  /* box-shadow: 2px 3px 10px #ccc; */
  /* border-radius: 10px; */
  width: 100%;
  /* height: 100%; */
  /* height: 60vh; */
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.bordered-table {
  border-collapse: collapse;
}

/* .bordered-table th,
.bordered-table td {
  border: 1px solid #000;
  padding: 8px;
} */
</style>

<!-- <style lang="scss" scoped>
 @media print {
  * {
    margin: 0 !important;
    padding: 0 !important;
  }
  .LocationTemplate {
    border: 2px solid red;
    width: 400px !important;
    height: 400px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .LocationTemplate .box {
    padding: 10px 20px !important;
    box-sizing: border-box !important;
    width: calc(90% / 6 * 4) !important;
    height: 90% !important;
    border: 2px solid #000 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
  }
  .box .item {
    width: 100%;
    height: 100%;
    font-weight: 600 !important;
  }
  .item-center {
    font-size: larger !important;
    text-align: center !important;
  }

  .imgBox {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 50px !important;
    height: 50px !important;
  }
} 
</style> -->
 
 <!-- <style>

* {
  margin: 0 !important;
  padding: 0 !important;
}
ul {
  list-style: none !important;
}
.LocationTemplate {
  border: 1px solid green !important;
  width: 500px !important;
  height: 500px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.box {
  padding: 10px 20px !important;
  box-sizing: border-box;
  width: calc(90% / 6 * 4);
  height: 90%;
  border: 2px solid #000;
}
.box ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.box ul li:last-child {
  width: 100%;
  height: 45%;
  /* border: 1px solid #000; */
  /* background-color: antiquewhite; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.box ul li {
  font-weight: 600;
  /* border: 1px solid green; */
}
.li-center {
  font-size: larger;
  text-align: center; white-space: nowrap;
}

.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 80%;
  border: 1px solid #000;
}

img {
  display: inline-block;
  width: 90%;
}
</style> -->
